<script>
import CustomButton from "@/components/button/index.vue";
import CustomTitle from "@/components/title/index.vue";
import SearchBox from "@/components/searchBox/index.vue"
import { ref, computed } from "vue";
export default {
  name: 'HistoryNote',
  components: {
    CustomButton,
    CustomTitle,
    SearchBox
  },
  setup() {
    const searchQuery = ref('');
    const records = ref([
      { time: '2024-12-31 17:34:36', actionType: '学习记录', content: 'subject: python, goal: 理解python基础', result: '**1月学习Python基础编程...**' },
      { time: '2024-12-31 17:29:18', actionType: '文档更新', content: 'text: 学习中国古代社会的基本标准', result: 'Filial piety is a basic moral standard...' },
      // 其他记录...
    ]);

    const filteredRecords = computed(() => {
      return records.value.filter(record => {
        return record.content.includes(searchQuery.value);
      });
    });

    const typeOptions = {
      'Q&A': '智能问答',
      Translation: '文本翻译',
      Planning: '学习规划'
    };

    const durationOptions = {
      '1d': '1天',
      '3d': '3天',
      '1w': '一周'
    };
/** 
    const exportRecords = () => {
      // 导出记录的功能实现
    };

    const deleteRecord = (record) => {
      // 删除记录的功能实现
    };
    */

    return {
      searchQuery,
      filteredRecords,
      // exportRecords,
      // deleteRecord
      typeOptions,
      durationOptions,
    };
  }
}
</script>

<template>
  <div class="history">
    <div class="header">
      <CustomTitle :title="$t('History.header.title')" icon="DocumentCopy"></CustomTitle>
      <div class="btns">
        <CustomButton :label="$t('History.btns.clearHistory')"></CustomButton>
        <CustomButton :label="$t('History.btns.exportRecords')"></CustomButton>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <SearchBox :content="$t('History.top.searchPlaceholder')" label="搜索"></SearchBox>
        <div class="select">
          <el-select v-model="selectedType" :placeholder="$t('History.top.typePlaceholder')" style="margin-left: 20px; width: 150px;">
            <el-option
              v-for="(label, value) in typeOptions"
              :key="value"
              :label="label"
              :value="value"
              style="padding-left: 20px; font-size: 15px;"
            ></el-option>
          </el-select>
          <el-select v-model="selectedDuration" :placeholder="$t('History.top.durationPlaceholder')" style="margin-left: 20px; width: 100px;">
            <el-option
              v-for="(label, value) in durationOptions"
              :key="value"
              :label="label"
              :value="value"
              style="padding-left: 20px; font-size: 15px;"
            ></el-option>
          </el-select>
        </div>
      </div>
      <el-table :data="filteredRecords" border>
        <el-table-column prop="time" :label="$t('History.table.time')" width="180"></el-table-column>
        <el-table-column prop="actionType" :label="$t('History.table.actionType')" width="120"></el-table-column>
        <el-table-column prop="content" :label="$t('History.table.content')"></el-table-column>
        <el-table-column prop="result" :label="$t('History.table.result')"></el-table-column>
        <el-table-column :label="$t('History.table.action')" width="180">
          <template #default="scope">
            <el-button @click="deleteRecord(scope.row)" type="text" style="color: red;">{{ $t('History.table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<style scoped>
@import "/src/css/base.css";
@import "/src/css/history/index.css";
</style>
